<template>
	<view class="auth-container">
		<!-- Logo区域 - 左右布局 -->
		<view class="logo-section">
			<view class="logo-icon"></view>
			<view class="logo-text">
				<view class="app-name">懂了么</view>
				<view class="app-subtitle">越 / 学 / 越 / 轻 / 松</view>
			</view>
		</view>
		
		<!-- 切换登录注册链接 -->
		<view class="switch-section">
			<text class="switch-text" v-if="!isRegisterMode">没有账号，</text>
			<text class="switch-text" v-else>已有账号，</text>
			<text class="switch-link" @click="toggleMode">
				{{ isRegisterMode ? '去登录' : '去注册' }}
			</text>
		</view>
		
		<!-- 表单区域 -->
		<view class="form-section">
			<!-- 用户名输入框 -->
			<view class="input-item">
				<input 
					class="input-field" 
					type="text" 
					v-model="formData.username"
					placeholder="请输入用户名"
				/>
				<view class="clear-btn" v-if="formData.username" @click="clearUsername">×</view>
			</view>
			
			<!-- 密码输入框 -->
			<view class="input-item">
				<input 
					class="input-field" 
					type="password" 
					v-model="formData.password"
					placeholder="密码"
				/>
			</view>
			
			<!-- 注册模式下的确认密码 -->
			<view class="input-item" v-if="isRegisterMode">
				<input 
					class="input-field" 
					type="password" 
					v-model="formData.confirmPassword"
					placeholder="确认密码"
				/>
			</view>
			
			<!-- 注册模式下的邀请码 -->
			<view class="input-item" v-if="isRegisterMode">
				<input 
					class="input-field" 
					type="text" 
					v-model="formData.inviteCode"
					placeholder="邀请码"
				/>
			</view>
			
			<!-- 登录模式下的动态密码 -->
			<view class="input-item dynamic-code" v-if="!isRegisterMode">
				<input 
					class="input-field" 
					type="text" 
					v-model="formData.dynamicCode"
					placeholder="动态密码"
				/>
				<text class="send-code-btn" @click="sendDynamicCode">发送动态码</text>
			</view>
		</view>
		
		<!-- 登录/注册按钮 -->
		<view class="submit-btn" @click="handleSubmit">
			{{ isRegisterMode ? '注 册' : '登 录' }}
		</view>
		
		<!-- 隐私协议 -->
		<view class="privacy-section">
			<view class="privacy-item" @click="togglePrivacy">
				<view class="checkbox" :class="{ 'checked': agreedPrivacy }"></view>
				<text class="privacy-text">点击确定您已同意《</text>
				<text class="privacy-link" @click.stop="viewPrivacy">隐私协议</text>
				<text class="privacy-text">》</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			formData: {
				username: '',
				password: '',
				confirmPassword: '',
				inviteCode: '',
				dynamicCode: ''
			},
			agreedPrivacy: false,
			isRegisterMode: false
		}
	},
	methods: {
		toggleMode() {
			this.isRegisterMode = !this.isRegisterMode;
			// 清空表单数据
			this.formData = {
				username: '',
				password: '',
				confirmPassword: '',
				inviteCode: '',
				dynamicCode: ''
			};
		},
		clearUsername() {
			this.formData.username = '';
		},
		async sendDynamicCode() {
			if (!this.formData.username) {
				uni.showToast({
					title: '请先输入用户名',
					icon: 'none'
				});
				return;
			}
			
			try {
				uni.showLoading({
					title: '发送中...'
				});
				
				// 使用全局API调用发送验证码接口
				const response = await this.$api.user.sendCode(this.formData.username, 4);
				
				uni.hideLoading();
				uni.showToast({
					title: '动态码已发送',
					icon: 'success'
				});
				
			} catch (error) {
				uni.hideLoading();
				console.error('发送动态码失败:', error);
				// 错误提示已经在http封装中处理了，这里不需要重复显示
			}
		},
		handleSubmit() {
			if (!this.agreedPrivacy) {
				uni.showToast({
					title: '请先同意隐私协议',
					icon: 'none'
				});
				return;
			}
			
			if (this.isRegisterMode) {
				this.handleRegister();
			} else {
				this.handleLogin();
			}
		},
		async handleLogin() {
			if (!this.formData.username || !this.formData.password) {
				uni.showToast({
					title: '请输入用户名和密码',
					icon: 'none'
				});
				return;
			}
			
			try {
				uni.showLoading({
					title: '登录中...'
				});
				
				// 使用全局API调用登录接口
				const response = await this.$api.user.simpleLogin(
					this.formData.username, 
					this.formData.password, 
					4
				);
				
				uni.hideLoading();
				uni.showToast({
					title: '登录成功',
					icon: 'success'
				});
				
				// 根据实际返回数据结构保存登录信息
				if (response.entity) {
					const userInfo = response.entity;
					
					// 使用用户工具保存用户信息
					this.$user.saveUserInfo(userInfo);
					
					// 设置HTTP请求的token
					if (userInfo.tokenId) {
						this.$http.setToken(userInfo.tokenId);
					}
					
					console.log('用户登录成功，信息已保存:', {
						userId: userInfo.userId,
						userName: userInfo.userName,
						dictName: userInfo.dictName,
						userType: userInfo.userType,
						schoolId: userInfo.schoolId,
						tokenId: userInfo.tokenId
					});
				}
				
				// 跳转到首页
				setTimeout(() => {
					uni.switchTab({
						url: '/pages/home/home'
					});
				}, 1500);
				
			} catch (error) {
				uni.hideLoading();
				console.error('登录失败:', error);
				// 错误提示已经在http封装中处理了，这里不需要重复显示
			}
		},
		async handleRegister() {
			if (!this.formData.username || !this.formData.password || !this.formData.confirmPassword) {
				uni.showToast({
					title: '请填写完整信息',
					icon: 'none'
				});
				return;
			}
			
			if (this.formData.password !== this.formData.confirmPassword) {
				uni.showToast({
					title: '两次密码输入不一致',
					icon: 'none'
				});
				return;
			}
			
			try {
				uni.showLoading({
					title: '注册中...'
				});
				
				// 使用全局API调用注册接口
				const response = await this.$api.user.register({
					username: this.formData.username,
					password: this.formData.password,
					inviteCode: this.formData.inviteCode
				});
				
				uni.hideLoading();
				uni.showToast({
					title: '注册成功',
					icon: 'success'
				});
				
				// 注册成功后切换到登录模式
				setTimeout(() => {
					this.isRegisterMode = false;
					this.formData.confirmPassword = '';
					this.formData.inviteCode = '';
				}, 1500);
				
			} catch (error) {
				uni.hideLoading();
				console.error('注册失败:', error);
				// 错误提示已经在http封装中处理了，这里不需要重复显示
			}
		},
		togglePrivacy() {
			this.agreedPrivacy = !this.agreedPrivacy;
		},
		viewPrivacy() {
			// 查看隐私协议
			console.log('查看隐私协议');
			uni.showToast({
				title: '查看隐私协议',
				icon: 'none'
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.auth-container {
	min-height: 100vh;
	background: linear-gradient(180deg, #4DD0E1 0%, #B2EBF2 100%);
	padding: 0 44rpx;
	position: relative;
	box-sizing: border-box;
}

/* Logo区域 - 左右布局 */
.logo-section {
	padding-top: 200rpx;
	margin-bottom: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 40rpx;
	
	.logo-icon {
		width: 120rpx;
		height: 120rpx;
		background: linear-gradient(135deg, #4CAF50 0%, #2196F3 100%);
		border-radius: 24rpx;
		position: relative;
		flex-shrink: 0;
		
		&::after {
			content: '?';
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			color: white;
			font-size: 48rpx;
			font-weight: bold;
		}
	}
	
	.logo-text {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		
		.app-name {
			font-size: 64rpx;
			font-weight: 400;
			color: #333;
			line-height: 1.2;
			margin-bottom: 8rpx;
		}
		
		.app-subtitle {
			font-size: 28rpx;
			color: #666;
			letter-spacing: 8rpx;
			line-height: 1;
		}
	}
}

/* 切换链接区域 */
.switch-section {
	text-align: center;
	margin-bottom: 80rpx;
	
	.switch-text {
		color: #999;
		font-size: 28rpx;
	}
	
	.switch-link {
		color: #4DD0E1;
		font-size: 28rpx;
		text-decoration: none;
	}
}

/* 表单区域 */
.form-section {
	margin-bottom: 100rpx;
	
	.input-item {
		background: rgba(255, 255, 255, 0.9);
		border-radius: 12rpx;
		margin-bottom: 32rpx;
		position: relative;
		height: 96rpx;
		display: flex;
		align-items: center;
		
		&.dynamic-code {
			justify-content: space-between;
		}
		
		.input-field {
			flex: 1;
			height: 100%;
			padding: 0 32rpx;
			font-size: 32rpx;
			color: #333;
			border: none;
			background: transparent;
			box-sizing: border-box;
			
			&::placeholder {
				color: #999;
			}
		}
		
		.clear-btn {
			position: absolute;
			right: 32rpx;
			width: 32rpx;
			height: 32rpx;
			background: #ccc;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			color: white;
			font-size: 24rpx;
			cursor: pointer;
		}
		
		.send-code-btn {
			color: #4DD0E1;
			font-size: 28rpx;
			padding: 0 32rpx;
			white-space: nowrap;
			cursor: pointer;
		}
	}
}

/* 提交按钮 */
.submit-btn {
	width: 100%;
	height: 88rpx;
	background: linear-gradient(135deg, #4DD0E1 0%, #26C6DA 100%);
	border-radius: 12rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 32rpx;
	font-weight: 500;
	margin-bottom: 80rpx;
	letter-spacing: 8rpx;
	cursor: pointer;
	box-sizing: border-box;
}

/* 隐私协议区域 */
.privacy-section {
	position: absolute;
	bottom: 80rpx;
	left: 50%;
	transform: translateX(-50%);
	width: calc(100% - 88rpx);
	display: flex;
	justify-content: center;
	
	.privacy-item {
		display: flex;
		align-items: center;
		cursor: pointer;
		
		.checkbox {
			width: 32rpx;
			height: 32rpx;
			border: 2rpx solid #ccc;
			border-radius: 50%;
			margin-right: 16rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-shrink: 0;
			
			&.checked {
				background: #4DD0E1;
				border-color: #4DD0E1;
				
				&::after {
					content: '✓';
					color: white;
					font-size: 20rpx;
					font-weight: bold;
				}
			}
		}
		
		.privacy-text {
			color: #666;
			font-size: 24rpx;
			line-height: 1.2;
		}
		
		.privacy-link {
			color: #4DD0E1;
			font-size: 24rpx;
			line-height: 1.2;
			text-decoration: none;
		}
	}
}
</style>